<%@page import="inventory.InventoryItem"%>
<%@page import="model.UserPage"%>
<%UserPage u = (UserPage) request.getAttribute("model");%>  

<html>
    <head>
        <title>User Page</title>
        <link rel="stylesheet" type="text/css" href="css/tabs.css"/>
        <link rel="stylesheet" type="text/css" href="css/styleUser.css"/>
        <link type="text/css" href="css/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />	
        <script type="text/javascript" src="jquery/jquery.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui-1.8.20.custom.min.js"></script>
        <script>
            $(document).ready(function() {
                $.post("index.jsp", { 
                    model: "UserPage",
                    view: "UserPageContentDiv",
                    action: "GetContentHTML"},
                function(data) {
                    $("#content").html(data);
                });
                
                $("li").click(function(e) {
                    e.preventDefault();
                    $("li").removeClass("active");
                    $(this).addClass("active");
                });
                
                $("#bookDiv").click(function() {
                    $.post("index.jsp", { 
                        model: "UserPage",
                        view: "UserPageContentDiv",
                        action: "GetContentHTML"},
                    function(data) {
                        $("#content").html(data);
                        $("#content").fadeIn(300);
                    });
                });
                
                $("#friendDiv").click(function() {
                    $.post("index.jsp", { 
                        model: "UserPage",
                        view: "UserPageFriendsDiv",
                        action: "GetContentHTML"},
                    function(data) {
                        $("#content").html(data);
                        $("#content").fadeIn(300);
                    });
                });
                
                $("#discoverDiv").click(function() {
                    $.post("index.jsp", { 
                        model: "UserPage",
                        view: "UserPageDiscoverDiv",
                        action: "GetDiscoverContent"},
                    function(data) {
                        $("#content").html(data);
                        $("#content").fadeIn(300);
                    });
                });
            });            
            
        </script>

    </head>

    <body>
        
        <ul id="header">
            <li>
                <%
                    out.println(u.user.username);
                %>
            </li>
            <li onclick="logout" style="float: right;">
            </li>
        </ul>

        <ul class="tabs group">
            <li class="active">
                <div id="bookDiv">
                    <a>Books</a> 
                </div>
            </li>
            <li>
                <div id="addABookDiv" onclick="$('#content').load('add_a_book.jsp');">
                    <a>Add a Book</a>
                </div>
            </li>
            <li>
                <div id="friendDiv">
                    <a>Friends</a>
                </div>
            </li>
            <li>
                <div id="discoverDiv">
                    <a>Discover</a>
                </div>
            </li>
            <li>
                <div id="accountDiv" onclick="$('#content').load('account_content.jsp');">
                    <a>Account</a>
                </div>
            </li>

        </ul>

        <div id="content">

        </div>


        <div id="legal">
            <p>&copy; LitHub 2012</p>
        </div>

    </body>

</html>
